<template>
	<view class="container">
		
		<u-sticky>
			<view class="nav-bar flex-y-center"
				:style="{paddingTop: getMenuButton().top + 'px', height: getMenuButton().height + 'px'}">
				<view class="address flex-y-center">
					<!-- <view class="address-text ellipsis">白塔站（公交站）</view>
					<u-icon name="arrow-down-fill" color="#000" size="24" top="4"></u-icon> -->
				</view>
				<view class="page-title">首页</view>
			</view>
		</u-sticky>
		
		<InputSearch :disabled="true" :customStyle="{margin: '10rpx 30rpx'}" @tap="$myUni.navTo('/pages/product/search')"></InputSearch>

		<swiper class="swiper" :indicator-dots="true" indicator-active-color="#fff" indicator-color="#999"
			:autoplay="true" :circular="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in bannerList" :key="item.id">
				<view class="swiper-item">
					<image :src="item.bannerImg | formatFile" mode="scaleToFill"></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="menus">
			<view class="menu-item" @tap="$myUni.navTo('/pages/product/choose-publish-type')">
				<image src="../../static/images/index-nav-1.png" mode=""></image>
				<view class="titles">
					<view class="title">发布商品</view>
					<view class="sub-title">去发布</view>
				</view>
			</view>
			<view class="menu-item"   @tap="$myUni.navTo('/pages/demand/form-demand')">
				<image src="../../static/images/index-nav-2.png" mode=""></image>
				<view class="titles">
					<view class="title">发布需求</view>
					<view class="sub-title">去发布</view>
				</view>
			</view>
		</view>

		<view class="navs">
			<view class="nav-item flex" v-for="(item, index) in navList" :key="index" @tap="$myUni.navTo(item.url)">
				<view class="color-wrapper ">
					<image :src="item.leftImage" mode=""></image>
					<view class="color-content flex-column-xy-center">
						<view class="title">
							{{item.title}}
						</view>
						<view class="to-more-btn flex-xy-center" :style="{color: item.color}">看更多</view>
					</view>
				</view>
				<view class="vehicles-wrapper">
					<image :src="image" mode="" v-for="(image, i) in item.vehiclesImages" :key="index"></image>
				</view>
			</view>
		</view>

		<view class="wrapper">
			<view class="title flex-x-bet-y-center">
				<view class="flex-y-center">
					<image src="/static/images/icon-title-1.png" mode=""></image>
					<text>最新需求</text>
				</view>
				<view class="more flex-y-center" @tap="$myUni.navTo('/pages/demand/list-demand')">
					<text>查看更多</text>
					<u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>
			<view class="demand-list flex-x-bet-y-center">
				<view class="demand-item" v-for="(item,index) in newDemandList" :key="item.id" @tap="$myUni.navTo('/pages/demand/detail-demand?id=' + item.id)">
					<view class="demand-title ellipsis2">{{item.demandTitle}}</view>
					<view class="demand-time">进场时间：{{item.entryTime}}</view>
				</view>
			</view>
		</view>

		<view class="wrapper" v-if="recommendStore.id">
			<view class="title flex-x-bet-y-center">
				<view class="flex-y-center">
					<image src="/static/images/icon-title-2.png" mode=""></image>
					<text>推荐商铺</text>
				</view>
				<view class="more flex-y-center" @tap="$myUni.navTo('/pages/merchant/ranking')">
					<text>查看更多</text>
					<u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>
			<view class="store-info flex-y-center" @tap="$myUni.navTo('/pages/merchant/detail?id=' + recommendStore.id)">
				<image :src="recommendStore.firmImgs.split(',')[0] | formatFile" mode="" class="store-avatar"></image>
				<view class="right-info">
					<view class="store-name">{{recommendStore.firmName}}</view>
					<view class="gray-text">{{recommendStore.mainBusiness}}</view>
					<view class="gray-text">{{recommendStore.province}}{{recommendStore.city}}{{recommendStore.area}}</view>
				</view>
			</view>
		</view>
		
		
		<view class="product-wrapper">
			<view class="title-category">
				<view class="title flex-y-center">
					<image src="/static/images/icon-title-3.png" mode=""></image>
					<text>热门商品</text>
				</view>
				
				<scroll-view class="category-wrapper" :scroll-x="true">
					<view class="flex-y-center">
						<view class="category-item" 
							:class="{'category-active' : currentCategoryIndex === index}" 
							v-for="(item, index) in categoryList" :key="item.id" 
							@tap.stop="categoryFilter(index)">{{item.categoryTitle}}
						</view>
					</view>
				</scroll-view>
			</view>
		
			<view class="product-list">
				<ProductItem v-for="(item, index) in listData" :key="item.id" :productInfo="item"></ProductItem>
			</view>
			<u-loadmore :status="loadingStatus" font-size="28" icon-size="30"></u-loadmore>
		</view>
		
		<view class="right-slide" :style="{right: slideRight + 'px'}" @tap="unfoldRightSlide">
			<view class="handle">
				<image src="/static/images/icon-index.png" mode=""></image>
				<view class="hr"></view>
			</view>
			<view class="handle" @tap="$myUni.navTo('/pages/mine/index','switchTab')">
				<image src="/static/images/icon-mine.png" mode=""></image>
				<view class="hr"></view>
			</view>
			<view class="handle" @tap="phoneCall">
				<image src="/static/images/icon-phone.png" mode=""></image>
				<view class="hr"></view>
			</view>
			<view class="handle" @tap.stop="foldRightSlide">
				<image src="/static/images/icon-fold.png" mode=""></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	import InputSearch from '@/components/InputSearch/index.vue'
	import ProductItem from '@/components/ProductItem/ProductItem.vue'
	import { getBanner, getParam } from '@/api/common.js'
	import { indexNewDemand } from '@/api/demand.js'
	import { recommendStore } from '@/api/store.js'
	import { indexCategory, getProductByCategory } from '@/api/product.js'
	import { phoneCall } from '@/utils/uni-api.js'
	export default {
		components: {
			InputSearch,
			ProductItem
		},
		data() {
			return {
				navList: [{
						title: '厂家货源',
						leftImage: '/static/images/index-color-1.png',
						vehiclesImages: ['/static/images/index-vehicles-1.png', '/static/images/index-vehicles-2.png',
							'/static/images/index-vehicles-3.png'
						],
						color: '#F97D4A',
						url: '/pages/product/list-product?from=factory&putType=1'
					},
					{
						title: '二手货源',
						leftImage: '/static/images/index-color-2.png',
						vehiclesImages: ['/static/images/index-vehicles-4.png', '/static/images/index-vehicles-5.png',
							'/static/images/index-vehicles-6.png'
						],
						color: '#F4AC62',
						url: '/pages/product/list-product?from=used&putType=2'
					},
					{
						title: '租赁资源',
						leftImage: '/static/images/index-color-3.png',
						vehiclesImages: ['/static/images/index-vehicles-7.png', '/static/images/index-vehicles-8.png',
							'/static/images/index-vehicles-9.png'
						],
						color: '#43B1AE',
						url: '/pages/product/list-product?from=rentOut&putType=3'
					}
				],
				rightSlideInfo: {},
				slideRight: 0,
				bannerList: [],
				newDemandList: [],
				recommendStore: {},
				categoryList: [],
				currentCategoryIndex: -1,
				queryParams:{
					pageNo: 1,
					pageSize: 10,
					categoryId: ''
				},
				listData:[],
				total: 0,
				loadingStatus: 'loading',
				kufuPhone: ''
			}
		},
		onLoad() {
			this.$nextTick(() => {
				uni.createSelectorQuery().in(this).select('.right-slide').boundingClientRect(data => {
					this.rightSlideInfo = data
				}).exec()
			})
			this.getBanner()
			this.getNewDemand()
			this.getRecommendStore()
			this.indexCategory()
			this.getProduct()
			this.getKefuPhone()
		},
		onReachBottom(){
			if(this.total > this.listData.length){
				this.queryParams.pageNo++
				this.getProduct()
			}
		},
		methods: {
			foldRightSlide(){
				this.slideRight = -(this.rightSlideInfo.width- 10)
			},
			unfoldRightSlide(){
				this.slideRight = 0
			},
			getKefuPhone(){
				getParam({paramName: 'PLATFORM_CUSTOMER_SERVICE_HOTLINE'}).then(res => {
					this.kufuPhone = res.result
				})
			},
			phoneCall(){
				uni.showModal({
					title:'提示',
					content: '是否电话咨询客服？',
					success: res => {
						if(res.confirm){
							phoneCall(this.kufuPhone)
						}
					}
				})
			},
			getBanner(){
				getBanner({platformType: 2, bannerPosition: 1}).then(res => {
					this.bannerList = res.result
				})
			},
			getNewDemand(){
				indexNewDemand().then(res => {
					this.newDemandList = res.result
				})
			},
			getRecommendStore(){
				recommendStore().then(res => {
					this.recommendStore = res.result[0]
				})
			},
			indexCategory(){
				indexCategory().then(res => {
					this.categoryList.push({categoryTitle: '全部', id: ''}, ...res.result)
				})
			},
			categoryFilter(index){
				this.currentCategoryIndex = index
				this.queryParams.categoryId = this.categoryList[index].id
				this.queryParams.pageNo = 1;
				this.listData = []
				this.getProduct()
			},
			getProduct(){
				this.loadingStatus = 'loading'
				getProductByCategory(this.queryParams).then(res => {
					this.listData.push(...res.result.records)
					this.total = res.result.total
					this.loadingStatus = this.total > this.listData.length ? 'loadmore' : 'nomore'
				})
			}
		}
	}
</script>

<style lang="scss">

	.nav-bar {
		position: relative;
		padding: 20rpx 30rpx;
		background: linear-gradient(to top, #F7F7F7, #FDE7DD);
		
		
		.address {
			font-size: 29rpx;
			color: #333333;

			.address-text {
				width: 200rpx;
			}
		}

		.page-title {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			font-size: 35rpx;
			color: #000000;
			text-align: center;
		}
	}

	.swiper {
		margin: 30rpx 30rpx 0;
		height: 337rpx;
		border-radius: 29rpx;


		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}

	.menus {
		display: flex;
		justify-content: space-between;
		margin: 30rpx;
		height: 134rpx;

		.menu-item {
			position: relative;
			flex: 1;

			image {
				position: absolute;
				inset: 0;
				z-index: 1;
				width: 100%;
				height: 100%;
			}


			.titles {
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: absolute;
				inset: 0;
				z-index: 2;
				padding-left: 30rpx;

				.title {
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
				}

				.sub-title {
					font-size: 25rpx;
					color: #808080;
				}

			}
		}

		.menu-item:first-child {
			margin-right: 30rpx;
		}
	}

	.navs {

		.nav-item {
			margin: 0 30rpx 30rpx;
			height: 183rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.01);
			border-radius: 15rpx;
			overflow: hidden;

			.color-wrapper {
				position: relative;
				width: 160rpx;

				image {
					position: absolute;
					inset: 0;
					z-index: 1;
					height: 100%;
					width: 100%;
				}

				.color-content {
					position: absolute;
					inset: 0;
					z-index: 2;

					.title {
						font-size: 29rpx;
						color: #FFFFFF;
					}

					.to-more-btn {
						width: 121rpx;
						height: 43rpx;
						margin-top: 30rpx;
						background: #FEF6F1;
						border-radius: 25rpx 25rpx 25rpx 25rpx;
						border: 1rpx solid #FFE7DD;
						font-size: 25rpx;
					}
				}
			}

			.vehicles-wrapper {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 25rpx;

				image {
					width: 150rpx;
					height: 150rpx;
				}
			}
		}
	}

	.wrapper {
		margin: 40rpx 30rpx;

		.title {
			font-weight: bold;
			font-size: 31rpx;
			color: #1C1C1C;
			margin-bottom: 38rpx;

			image {
				width: 42rpx;
				height: 42rpx;
				margin-right: 15rpx;
			}

			.more {
				font-size: 27rpx;
				color: #808080;
			}
		}

	}

	.demand-list {

		.demand-item {
			width: 330rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.01);
			border-radius: 15rpx;
			box-sizing: border-box;
			padding: 20rpx;

			.demand-title {
				font-weight: bold;
				font-size: 27rpx;
				color: #333333;
				margin-bottom: 10rpx;
			}

			.demand-time {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
	
	.store-info{
		background: #FFFFFF;
		border-radius: 19rpx;
		padding: 30rpx;
		
		.store-avatar{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			flex-shrink: 0;
		}
		
		.right-info{
			flex:1;
			margin-left: 30rpx;
			
			.store-name{
				font-size: 33rpx;
				color: #333333;
				font-weight: 500;
			}
			
			.gray-text{
				font-size: 27rpx;
				color: #808080;
				padding-top: 10rpx;
			}
		}
	}
	
	.product-wrapper{
		margin: 0 0 0rpx 30rpx;
		
		
		.title-category{
			display: flex;
			align-items: center;
			margin-bottom: 38rpx;
			
			.title {
				font-weight: bold;
				font-size: 35rpx;
				color: #1C1C1C;
				white-space: nowrap;
			
				image {
					width: 36rpx;
					height: 42rpx;
					margin-right: 15rpx;
				}
			
				.more {
					font-size: 27rpx;
					color: #808080;
				}
			}
			
			.category-wrapper{
				white-space: nowrap;
				margin-left: 40rpx;
				overflow: hidden;
				
				.category-item{
					display: flex;
					background: #F0F0F0;
					border-radius: 25rpx;
					border: 1rpx solid #EBEBEB;
					padding: 5rpx 25rpx;
					font-size: 25rpx;
					color: #333333;
					margin-right: 20rpx;
				}
				
				.category-active{
					border: 1rpx solid #FFD9C9;
					background: #FFF0EA;
					color: $theme-color;
				}
			}
		}
		
		
		.product-list{
			margin-right:30rpx;
		}
		
	}
	
	
	.right-slide{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 0;
		top: 450rpx;
		width: 83rpx;
		z-index: 999;
		background: rgba(0,0,0,0.85);
		border-radius: 14rpx 0rpx 0rpx 14rpx;
		padding: 30rpx 0;
		transition: all .2s;
		
		.handle{
			display: flex;
			flex-direction: column;
			align-items: center;
			
			image{
				width: 50rpx;
				height: 50rpx;
			}
			
			.hr{
				width: 40rpx;
				height: 2rpx;
				background-color:  #7D7D7D;
				margin: 20rpx 0;
			}
		}
		
		.handle:last-child{
			height: auto;
			
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
</style>